<template>
    <div class="box">
        <div id="consignee">
            <!-- 收货人信息 -->
            <div class="consignee-message">
                <p>收货人：<span>曾树俊</span></p>
                <p>17707078901</p>
            </div>
            <!-- 收货人地址 -->
            <div class="consignee-address">
                <div>收货地址:
                    <span>广东省</span>
                    <span>深圳市</span>
                    <span>宝安区</span>
                    <span>石岩街道应人石</span>
                </div>
            </div>
            <!-- 边框背景 -->
            <div class="border-red"></div>
            <div class="border-blue"></div>
        </div>
    </div>
</template>

<script>
export default {
    
}
</script>

<style lang="less" scoped>
.box{
    background-color: #ffffff;
    width: 100%;
    padding-bottom: 24px;
}
#consignee{
    width: 589px;
    margin: 0 auto;
    height: 175px;
    position: relative;
    padding-top: 1px;
    // 收货人信息
    .consignee-message{
        display: flex;
        justify-content: space-between;
        margin-top: 19px;
        font-size: 28px;
    }
     // 收货人地址
    .consignee-address{
        width: 536px;
        margin-top: 36px;
        font-size: 28px;
    }
    // 边框-红
    .border-red{
        background: url(../../../../static/images/orderDetails/border-red.png) center center;
        background-size: 100% 100%;
        width: 744px;
        height: 6px;
        position: absolute;
        left: -80px;
        bottom: -24px;
    }
        // 边框-蓝
    .border-blue{
        background: url(../../../../static/images/orderDetails/border-blue.png) center center;
        background-size: 100% 100%;
        width: 744px;
        height: 6px;
        position: absolute;
        left: -80px;
        bottom: -24px;
    }
}
// 右箭头图标
#consignee::after{
    content: "";
    background: url(../../../../static/images/orderDetails/right-arrow.png) center center;
    background-size: 100% 100%;
    width: 30.8px;
    height: 40.9px;
    display: inline-block;
    position: absolute;
    right: -40px;
    top: 61px;
}

// 地点图标
#consignee::before{
    content: "";
    display: inline-block;
    width: 34px;
    height: 48px;
    background: url(../../../../static/images/orderDetails/address.png) center center;
    background-size: 100% 100%;
    position: absolute;
    left: -50px;
    top: 64px;
}


</style>